import React, { Component } from 'react'

import {
    Modal,
    Toast,
    Flex,
    Button,
    List,
    Checkbox,
    Icon,
    SwipeAction,
    WingBlank,
    ActivityIndicator
} from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { order_address, add_btn } from './address.less'

import select1svg from '../../assets/img/select1.svg';
import select2svg from '../../assets/img/select2.svg';

const Item = List.Item;

class Address extends Component {
    constructor(props) {
        super(props);
        this.state = {
            addressList: [],
            selfList: [],
            hasSelfList: true,
            //表示是否要显示自提
            detail: 'open',
            //loading
            isActivityIndicator: true,
        }

    }




    componentDidMount() {


    }


    onSelectAddress = (address, mode) => {
        const {addressList} = this.state;
        if (mode == 'ziti') {
            if (!addressList[0]) {
                Toast.info('请先新增收货地址')
                return
            }
            address.mjname = addressList[0].trueName
            address.mjtel = addressList[0].mobPhone
        }
        this.props.dispatch({
            type: 'selectAddress',
            payload: address,
            mode: mode
        });
        this.props.router.replace(`/order/${this.props.order.cartId}`)
    }

    gotoAdd = () => {
        this.props.router.push('/addressAdd')
    }

    gotoEdit = (address) => {
        this.props.router.push({
            pathname: '/addressEdit',
            state: address
        });
    }

    gotoDel = (address) => {
        Modal.alert('删除', '确定删除地址么?', [
            {text: '取消'},
            {
                text: '确定',
                onPress: () => {
                    addressApi.delAddress(address.addressId).then(result => {
                        if (result.result == 1) {
                            this.setState({})
                        }

                        Toast.info(result.msg);
                        //删除地址后，重新发请求，获取地址列表，此时应该发送默认地址的经纬度，如果默认地址没有，则发送当前的经纬度
                        const {
                            selectedAddress
                        } = this.props.order;
                        if (selectedAddress.provinceId) {
                            //根据城市获取经纬度
                            let addressInfo = selectedAddress.areaInfo + selectedAddress.address;
                            console.log(addressInfo)
                            this.searchByStationName(addressInfo, storeIds);
                        } else {
                            this.getLocation(storeIds);
                        }
                    })
                },
                style: {fontWeight: 'bold'}
            },
        ])
    }
    gotoZiti = () => {
        const {addressList} = this.state;
        if (!addressList[0]) {
            Toast.info('请先新增收货地址')
            return
        }
        this.props.router.push('/addressZiti')
    }
    setDefault = (address) => {
        //修改selectAddress状态，保证后续获取的是选中的默认地址附近的自提点
        this.props.dispatch({
            type: 'selectAddress',
            payload: address,
            mode: 'express'
        });
        addressApi.updateAddressDef(address.addressId).then(result => {
            if (result.result == 1) {
                const {
                    selectedAddress
                } = this.props.order;
                console.log(selectedAddress);
                if (selectedAddress.provinceId) {
                    //根据城市获取经纬度
                    let addressInfo = selectedAddress.areaInfo + selectedAddress.address;
                    console.log(addressInfo)
                    this.searchByStationName(addressInfo, storeIds);
                } else {
                    this.getLocation(storeIds);
                }
            }
        })
    }


    render() {
        const { orderAddress, dispatch } = this.props;
        const { addressEntities } = orderAddress;

        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                 // className={addressList}
            >
                <NavTopBar dispatch={dispatch} title="管理收货地址"/>
                <MyScroll>
                    {
                        addressEntities.map((value,i)=>{

                            return (
                                <SwipeAction key={i} style={{backgroundColor: 'gray', width: "100%",marginBottom:".3rem"}} autoClose
                                             right={[
                                                 {
                                                     text: <span>&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;</span>,
                                                     onPress: () => {
                                                        dispatch({type:"orderAddress/delAddressEFF",obj:{ id:value.id } });
                                                     },
                                                     style: {backgroundColor: '#ff0036', color: 'white'},
                                                 },
                                             ]} >
                                    <div  style={{width:"100%",backgroundColor:"#fff"}}>
                                        <WingBlank>
                                            <div
                                                onClick={()=>{
                                                    dispatch({ type:"orderAddress/edtAddressApiEFF", obj:{ id: value.id } }).then(r=>{
                                                        dispatch({ type:"order/addressAllEff" });
                                                        dispatch(routerRedux.go(-1));
                                                    });
                                                }}
                                            >
                                                <div style={{padding:".3rem 0",fontSize:".3rem"}}>
                                                    <span>{value.trueName}</span>
                                                    <span style={{marginLeft:".3rem"}}>{value.mobPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}</span>
                                                </div>
                                                <div style={{paddingBottom:".3rem",borderBottom:"1px solid #999",fontSize:".3rem"}}>
                                                    { `${value.areaInfo} ${value.address}` }
                                                </div>
                                            </div>

                                            <Flex justify="between" style={{padding:"0.15rem 0"}}>
                                                <Flex>
                                                    {
                                                        value.isDefault==1 ? <Icon type={select1svg.id}/> : <Icon type={select2svg.id} onClick={()=>{
                                                            dispatch({ type:"orderAddress/edtAddressApiEFF", obj:{ id: value.id } });
                                                        }}/>
                                                    }
                                                    <span style={{marginLeft:".15rem"}}>默认地址</span>
                                                </Flex>
                                                <div onClick={()=>{
                                                    //let arr=[value.id,1];
                                                 dispatch(routerRedux.push({
                                                        pathname: `/editOrderAddress/${value.id}`,
                                                    }));
                                                }}>编辑</div>
                                            </Flex>
                                        </WingBlank>

                                    </div>
                                </SwipeAction>
                                )


                        })
                    }

                </MyScroll>
                <Button
                    type='primary'
                    className={add_btn} onClick={()=>{
                    dispatch(routerRedux.push({
                        pathname: `/orderAddressAdd`,
                    }));
                }}>添加收货地址</Button>
            </Flex>
            )


    }
}


export default connect(({orderAddress})=>({orderAddress}))(Address);
